<template>
  <a-row class="fullscreen-container" type="flex" align="middle">
    <a-col :span="10" class="logo-col">
      <img src="/images/logo.png" class="logo" alt="AI海龟汤 Logo">
    </a-col>
    <a-col
      :span="14"
      class="content-wrapper"
    >
      <div class="centered-content">
        <h5 class="title">AI海龟汤</h5>
        <h2>©2025 韩小豪 <849631113@qq.com></h2>
        <h2><a href="https://blog.csdn.net/weixin_68138311">联系我</a> </h2>
        <br>
        <a-button
          type="primary"
          size="large"
          @click="startNewGame"
          class="action-button"
        >
          开始游戏
        </a-button>
      </div>
    </a-col>
  </a-row>
</template>

<style scoped>
.fullscreen-container {
  min-height: 100vh;
  padding: 0 24px;
}

.logo-col {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.logo {
  max-width: 400px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}

.content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .logo-col {
    order: 1;
    margin-top: 40px;
  }

  .fullscreen-container {
    flex-direction: column;
    padding-top: 40px;
  }

  .logo {
    max-width: 280px;
  }
}
</style>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const startNewGame = () => {
  const roomId = Date.now()
  router.push({ name: 'chat', params: { roomId } })
}
</script>

<style scoped>
/* 全屏容器 */
.fullscreen-container {
  //position: fixed;
  //top: 0;
  //left: 0;
  //width: 100vw;
  //height: 100vh;
  //display: flex;
  //justify-content: center;
  //align-items: center;
  //background: #f0f2f5; /* 可选背景色 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('/images/bg-home.jpg') no-repeat center center/cover; /* 添加背景图 */
}

/* 内容容器 */
.content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 居中内容区块 */
.centered-content {
  text-align: center;
  max-width: 90%;
  padding: 20px;
  transform: translateY(-10%); /* 微调垂直位置 */
}

.title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.85);
}

.action-button {
  width: 200px;
  height: 50px;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.action-button:hover {
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .title {
    font-size: 1.8rem;
    padding: 0 15px;
  }

  .action-button {
    width: 160px;
    height: 45px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 1.5rem;
  }

  .centered-content {
    transform: translateY(-5%);
  }
}
</style>
